// 实时监控

<template>
    <f7-page class="detail">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="arrow_back" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>实时监控</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <div class="content-box">
            <img
                :src="
                    require(`../../../../assets/img/qzjx/icon-${
                        notifyInfo.equipmentType || 'TSQZJ'
                    }.svg`)
                "
                alt=""
                class="left-box"
            />
            <div class="right-box">
                <div class="title-box">
                    <h3>{{ notifyInfo.propertyCode || '--' }}</h3>
                </div>
                <div>
                    <!-- <span class="tag tag-fill">{{
                        notifyInfo.equipmentType
                            | DictItem(controlData.equipmentType)
                    }}</span> -->
                    <span class="tag tag-fill">塔式起重机</span>
                    <span class="tag tag-fill" v-if="notifyInfo.workSiteCode"
                        >自编号：{{ notifyInfo.workSiteCode }}</span
                    >
                </div>
                <p>{{ notifyInfo.engineeName || '--' }}</p>
            </div>
        </div>
        <div class="monitor-content">
            <div class="monitor-title">
                <span>实时监测</span>
                <div
                    class="status"
                    :class="status == '在线' ? 'status-green' : ''"
                >
                    在线
                </div>
            </div>
            <div class="monitor-bottom">
                <div
                    class="monitor-list"
                    v-if="notifyInfo.equipmentType == 'TSQZJ'"
                >
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts1.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">2</span>
                                <span>%</span>
                            </div>
                            <div class="name">力矩</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts2.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">8.86</span>
                                <span>m</span>
                            </div>
                            <div class="name">幅度</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts3.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">0</span>
                                <span>t</span>
                            </div>
                            <div class="name">载重</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts4.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">5.4</span>
                                <span>m</span>
                            </div>
                            <div class="name">起升高度</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts5.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">2</span>
                                <span>倍</span>
                            </div>
                            <div class="name">吊绳倍率</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts6.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">126.2</span>
                                <span>°</span>
                            </div>
                            <div class="name">回转角度</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts7.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">1.5</span>
                                <span>m/s</span>
                            </div>
                            <div class="name">风速</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/ts8.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">0</span>
                                <span>°</span>
                            </div>
                            <div class="name">塔身倾斜角度</div>
                        </div>
                    </div>
                </div>
                <div
                    class="monitor-list"
                    v-if="notifyInfo.equipmentType == 'SGSJJ'"
                >
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/sg1.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">0.79</span>
                                <span>t</span>
                            </div>
                            <div class="name">载重</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/sg2.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num num-text">关闭</span>
                            </div>
                            <div class="name">前门</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/sg3.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">22.33</span>
                                <span>m</span>
                            </div>
                            <div class="name">高度</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/sg4.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num num-text">关闭</span>
                            </div>
                            <div class="name">后门</div>
                        </div>
                    </div>
                    <div class="monitor-item">
                        <img src="../../../../assets/img/qzjx/sg5.png" alt="" />
                        <div class="monitor-detail">
                            <div class="total">
                                <span class="num">2.5</span>
                                <span>m/s</span>
                            </div>
                            <div class="name">速度</div>
                        </div>
                    </div>
                </div>
                <div class="monitor-end">
                    <div class="monitor-end-left">终端</div>
                    <div class="monitor-end-right">
                        <h4>91330100577330709ETC2023030108</h4>
                        <p>接入标准：新国标</p>
                        <p>接入IP：128.323.245.2</p>
                        <p>Mac地址：23:42:45:13:54</p>
                        <p>最新监测时间：2023-03-28 10:11:15</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-content">
            <div class="video-title">
                <span>实时视频</span>
                <div
                    class="status"
                    :class="status1 == '在线' ? 'status-green' : ''"
                >
                    {{ status1 }}
                </div>
            </div>
            <div class="video"></div>
        </div>
    </f7-page>
</template>

<script>
import Config from '@/libs/config'
import Controller from '@/libs/framework/controller'
export default class sInsp extends Controller {
    onBeforeInit() {
        this.urls = {
            // model: '/app/equipment/eqmInstallNotify/queryInstallManageInfo',
        }
    }
    onInit() {}
    onBeforeQuery(type, conditions, params) {}
    onAfterQuery(type, isSuccess, result) {
        return result
    }

    mixin() {
        return {
            props: {},
            data() {
                return {
                    notifyInfo: {
                        equipmentType: 'SGSJJ',
                        workSiteCode: '2#',
                        propertyCode: '粤A-SGK234744',
                        engineeName:
                            '广汽本田新能源车（年产12万辆）产能扩大建设项目涂装车间二期、涂总',
                    },
                    controlData: {
                        equipmentType: [],
                    },
                    status: '在线',
                    status1: '离线',
                }
            },
            computed: {},
            methods: {},
            created() {},
            mounted() {},
            watch: {},
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.content-box {
    .left-box {
        width: 28px;
        height: 28px;
    }
    .title-box {
        margin-bottom: 10px;
    }
}
.monitor-content {
    margin-top: 10px;
    padding: 10px 5px;
    background: linear-gradient(
        180deg,
        rgba(231, 241, 255, 0.7) 0%,
        rgba(190, 219, 255, 0.7) 100%
    );
    border-radius: 8px;
    .monitor-title {
        padding: 0 12px;
        color: #1990ff;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
            border: 1px solid #8995ac;
            border-radius: 4px;
            padding: 2px 6px;
            color: #8995ac;
            font-weight: 400;
            font-size: 12px;
        }
        .status-green {
            color: #25c670;
            border-color: #25c670;
        }
    }
    .monitor-bottom {
        margin-top: 10px;
        padding: 19px 10px 12px;
        background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
        border-radius: 8px;
        border: 1px solid;
        border-image: linear-gradient(
                180deg,
                rgba(255, 255, 255, 1),
                rgba(255, 255, 255, 0)
            )
            1 1;
        .monitor-list {
            display: flex;
            flex-wrap: wrap;
            .monitor-item {
                width: 50%;
                display: flex;
                img {
                    width: 55px;
                    height: 55px;
                }
                .monitor-detail {
                    font-size: 12px;
                    color: #8995ac;
                    .total {
                        color: #333333;
                        font-size: 14px;
                        .num {
                            font-size: 17px;
                            font-weight: bold;
                        }
                        .num-text {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .monitor-end {
            display: flex;
            padding: 15px;
            background: #f7fafe;
            border-radius: 8px;
            .monitor-end-left {
                background: url('../../../../assets/img/qzjx/icon-end.png')
                    no-repeat;
                background-size: 100% 100%;
                width: 46px;
                height: 46px;
                text-align: center;
                line-height: 46px;
                font-size: 14px;
                font-weight: 500;
                color: #3385ff;
                margin-right: 12px;
            }
            .monitor-end-right {
                h4 {
                    font-size: 13px;
                    font-weight: 600;
                    color: #333333;
                    margin-bottom: 6px;
                }
                p {
                    font-size: 12px;
                    font-weight: 400;
                    color: #61677a;
                }
            }
        }
    }
}
.video-content {
    margin-top: 10px;
    background: #ffffff;
    border-radius: 8px;
    .video-title {
        background: linear-gradient(267deg, #ffffff 0%, #edf7ff 100%);
        border-radius: 8px 8px 0px 0px;
        padding: 12px 16px;
        color: #0f1826;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .status {
            border: 1px solid #8995ac;
            border-radius: 4px;
            padding: 2px 6px;
            color: #8995ac;
            font-weight: 400;
            font-size: 12px;
        }
        .status-green {
            color: #25c670;
            border-color: #25c670;
        }
    }
    .video {
        padding: 15px;
    }
}
</style>
